﻿/**/
var columns =[{fild:'name',title:'name',css:"w100"},{fild:'age',title:'age',css:"w80"},{fild:'sex',title:'sex',css:"w50"}];
var datas =[{name:'Tom',age:'21',sex:'man'},
			{name:'jack',age:'21',sex:'man'},
			{name:'arvin',age:'21',sex:'man'},
			{name:'anny',age:'21',sex:'woman'}
		  ]
/**/
var Toolbar =React.createClass({
	searchBtn:function(){
		let v =this.refs.searh.value;
		if(v==''){
			console.error('please input 4 number!');
			return;
		}
		this.props.Search(v);
	},
	render: function() {
		return (<div class="toolbar">
					<input type="text" ref="searh" />
					<input type="button" value="searh" onClick={this.searchBtn}/>
				</div>);
	}

});

var  Thead = React.createClass({

	render: function() {
		let columns = this.props.columns;
		console.table(columns);
		return (<thead>
		<tr>
		{
			columns.map(function(column){
	
				return (<th class={column.css}>{column.title}</th>)
			})
		}
		</tr>
		</thead>);
	}
	
});
var  Tbody = React.createClass({

	render: function() {
		let columns = this.props.columns,
		    datas = this.props.datas;
		    console.table(datas);
		if(0){
			return <tbody class="loading">loading...</tbody>
		}else if(datas==null||datas.length==0){
			return <tbody class="nodata">nodata...</tbody>
		}else{
			return (<tbody>
				   {datas.map(function(row,i){
				   		console.log(row);
						return (<tr data-index={i} >
						{
							columns.map(function(column){
								return (<td class={column.css}>{row[column.fild]}</td>)
							})
						}
						</tr>)

						
				 	
				 	})
				  }
				 </tbody>)
		}

	}
	
});
var  Table = React.createClass({
		render: function() {
			return (<table>
				<Thead columns={this.props.columns}/>
				<Tbody columns={this.props.columns} datas={this.props.datas}/>
		   </table>);

		}
	
});
var Footer = React.createClass({
	render: function() {
		return <div >this is footer!</div>
	}

});
var Myable = React.createClass({
	Search:function(param){
		console.log(param)
	},
	render: function() {
		return (<div>
	    <Toolbar Search={this.Search}/>
	    <Table  columns={this.props.columns} datas={this.props.datas} />
	    <Footer />
	   </div>);

	}
});

ReactDOM.render(
	<Myable url="api/test" columns={columns} datas={datas} />,
	document.getElementById('table')
);